<template>
  <div class="form_bar">
    <el-form ref="formRef" :model="form" class="searchForm" :inline="true">
      <el-row :gutter="20" class="el_filter_row">
        <el-col :span="8"
          ><!-- 规则名称 -->
          <el-form-item label="规则名称" label-width="70px"> <el-input placeholder="请输入规则名称搜索" v-model="form.title"></el-input> </el-form-item
        ></el-col>
        <!-- 创建人 -->
        <!-- <el-col :span="8">
          <el-form-item label="创建人" label-width="80px">
            <el-select v-model="form.create_uids" placeholder="请选择员工" multiple @click="openDepart" @change="changeDepart">
              <el-option v-for="item in creators" :key="item.id" :label="item.name" :value="item.id">{{ item.name }}</el-option>
            </el-select>
          </el-form-item></el-col
        > -->
        <el-col :span="8"
          ><!-- 创建时间 -->
          <el-form-item label="创建时间" class="selectTime" label-width="80px">
            <el-date-picker format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" v-model="form.create_time" type="datetimerange" start-placeholder="开始时间" end-placeholder="结束时间" style="width: 100%" /> </el-form-item
        ></el-col>
        <el-col :span="8">
          <!-- 状态 -->
          <el-form-item label="状态" label-width="80px">
            <el-select v-model="form.rule_status" placeholder="请选择状态">
              <el-option v-for="item in ruleStatus" :key="item.id" :label="item.name" :value="item.id">{{ item.name }}</el-option>
            </el-select>
          </el-form-item></el-col
        >
        <el-col :span="24"
          ><el-form-item>
            <el-button type="primary" @click="submitForm()">查询</el-button>
            <el-button @click="resetForm()">清空</el-button>
            <el-button type="text" :icon="visible ? ArrowDownBold : ArrowUpBold" @click="pickUp">{{ visible ? '收起' : '展开' }}</el-button>
          </el-form-item></el-col
        >
      </el-row>
    </el-form>
    <!-- 部门人员弹框 -->
    <ZWDepart ref="DepartRef" @submit="getDepart" />
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, computed, watch } from 'vue'
  import type { ElForm } from 'element-plus'
  import { ArrowDownBold, ArrowUpBold } from '@element-plus/icons-vue'
  type FormInstance = InstanceType<typeof ElForm>
  import { DFormat, getSetionId, IsNotEmpty, AFold } from '@/utils/utils'
  import ZWDepart from '@/components/ZWDepart.vue'

  const searchSelectRef = ref<null | HTMLElement>(null)
  const DepartRef = ref<null | HTMLElement>(null)

  const emit = defineEmits(['submit'])

  import { useStore } from '@/store'
  const store = useStore()

  const formRef = ref<FormInstance>()
  // 创建人options
  const creators = ref([])
  const ruleStatus = ref([
    {
      id: 0,
      name: '全部'
    },
    {
      id: 1,
      name: '未开始'
    },
    {
      id: 2,
      name: '进行中'
    },
    {
      id: 3,
      name: '已结束'
    },
    {
      id: 4,
      name: '已暂停'
    }
  ])
  const form = reactive({
    title: '',
    rule_status: 0,
    create_uids: creators.value,
    create_time: []
  })
  const visible = ref(true)
  const pickUp = () => {
    visible.value = !visible.value
    AFold(visible.value, '.el_filter_row')
    emit('getTableH')
  }
  //打开新建选择人
  const openDepart = () => {
    DepartRef.value.departVisble = true
    DepartRef.value.selectedMember = creators.value
  }
  // 获取部门成员
  const getDepart = (res: any) => {
    creators.value = res
    form.create_uids = getSetionId('id', creators.value)
    DepartRef.value.departVisble = false
  }
  const changeDepart = (data: any) => {
    let removeDepart = creators.value.find((item: any) => !data.includes(item.id))
    let arr: any[] = creators.value.filter((item: any) => data.includes(item.id))
    form.create_uids = getSetionId('id', arr)
    creators.value = arr
    DepartRef.value.removeItem(removeDepart)
  }
  // 提交查询
  const submitForm = () => {
    const params = {
      title: '',
      rule_status: 0,
      create_uids: [],
      create_time: ''
    }
    params.create_time = IsNotEmpty(form.create_time) ? form.create_time[0] + '~' + form.create_time[1] : ''
    params.title = form.title
    params.rule_status = form.rule_status
    params.create_uids = form.create_uids
    emit('submit', params)
  }
  //重置
  const resetForm = () => {
    form.create_uids = []
    form.create_time = []
    form.title = ''
    form.rule_status = 0
    creators.value = []
    DepartRef.value.removeItem(form.create_uids)
    emit('submit', form)
  }
</script>

<style lang="scss" scoped>
  .form_bar {
    background: #f9f9f9;
    padding: 8px 12px;
    .searchForm {
      padding: 8px 0;
      .el-row {
        display: flex;
        flex-wrap: wrap;
        position: relative;
        box-sizing: border-box;
        margin: -8px -10px;
        .el-col {
          padding: 8px 0;
          &:last-of-type {
            flex: auto;
            text-align: right;
          }
          .el-form-item {
            margin-bottom: 0;
            width: 100%;
            .el-form-item__label-wrap {
              .el-form-item__label {
                font-size: 14px;
                font-family: STHeitiSC-Light, STHeitiSC;
                font-weight: 300;
                color: #33302d;
              }
            }
            .el-form-item__content {
              .el-input,
              .el-select,
              .el-date-editor {
                width: 100%;
              }
            }
          }
        }
      }
    }
  }
</style>
